<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../../base.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

<%--    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>--%>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            position: absolute;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        header {
            margin: 5px auto;
            font-size: 16px;
        }

        .typein {
            width: 90px;
            height: 16px;
            font-size: 16px;
        }

        /*.btn{color:#fff;height: 25px;}*/
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6VArBpbbbMjBVP22TflHkpSq"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
    <title>路线查询</title>
</head>
<body>
<input type="hidden" id="from" value="${shippingOrder.portOfLoading}">
<input type="hidden" id="to" value="${shippingOrder.portOfDischar}">
<div id="allmap"></div>
</body>
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../../plugins/echarts/echarts.min.js"></script>
</html>
<script type="text/javascript">
    var map = new BMap.Map("allmap");
    var lng, lat;

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {

            //map.panTo(r.point);
            lng = r.point.lng;
            lat = r.point.lat;
            //alert('您的位置：'+r.point.lng+','+r.point.lat);

            map.centerAndZoom(new BMap.Point(lng, lat), 18);
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        } else {
            alert('failed' + this.getStatus());
        }
    });
    window.onload = function () {
        map.clearOverlays();
        // var zhongdian = "大连港";
        var zhongdian = document.querySelector("#to").value;
        // alert(zhongdian)
        // var qidian = "天津港"
        var qidian = document.querySelector("#from").value;

        //从定位地点到终点
        //search(new BMap.Point(lng, lat),zhongdian,BMAP_DRIVING_POLICY_LEAST_DISTANCE);

        //从输入的起点到终点
        search(qidian, zhongdian, BMAP_DRIVING_POLICY_LEAST_DISTANCE);

        function search(start, end, route) {
            var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, autoViewport: true}, policy: route});
            driving.search(start, end);
        }
    }

</script>